<template>
	<el-card shadow="hover" header="学习轨迹" v-loading="loading">
        <div class="fudong">
            <el-radio-group v-model="changeyes" @change="changedate" size="small">
                <el-radio-button label="本周" ></el-radio-button>
                <!-- <el-radio-button label="上周"></el-radio-button> -->
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="上月"></el-radio-button>
            </el-radio-group>
        </div>
		<scEcharts ref="c1" height="345px" :option="option"></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';

	export default {
		title: "学习趋势",
		icon: "el-icon-data-line",
		description: "目前学习趋势",
		components: {
			scEcharts
		},
		data() {
			return {
				loading: true,
				option: {},
                changeyes: '本周',
				date: {
					dateType: 1
				},
				echartsData: []
			}
		},
		watch: {
			echartsData(){
				this.init()
			}
		},
		created() {
			var _this = this;
			setTimeout(function() {
				_this.loading = false
			}, 500);
			this.init();

		},
		mounted(){
			this.getlist()

		},
		methods: {
			changedate() {
                if(this.changeyes == '本周'){
					this.date.dateType = 1
					this.getlist()
					this.init()
				}else if(this.changeyes == '本月'){
					this.date.dateType = 2
					this.getlist()
					this.init()
				}else {
					this.date.dateType = 3
					this.getlist()
					this.init()
				}
			},
			init(){
				let data1 = []
				let data2 = []
				if(this.echartsData){
					data1 = this.echartsData.map(item => { return item.label })
					data2 = this.echartsData.map(item => { return item.number })
				}
				var option = {
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						boundaryGap: false,
						type: 'category',
						data: data1
					},
					yAxis: [{
						type: 'value',
						"splitLine": {
							"show": false
						},
						axisLabel: {
							formatter: function (value) {
								return value;
							}
						}
					}],
					series: [
						{
							name: '数量',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1,
								color: '#409EFF'
							},
							areaStyle: {
								opacity: 0.1,
								color: '#79bbff'
							},
							data: data2
						},
					],
				};
				this.option = option;
			},
			async getlist() {
				let res = await this.$API.common.dynamic.get(this.date)
				if(res.error == 0) {
					this.echartsData = res.data.learnData
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.fudong{position: absolute; right: 20px; top: 15px;}
</style>